 $(document).ready(function () {
            const login = localStorage.getItem('login');
            const token = localStorage.getItem('token');
            console.log(login);
            console.log(token);

            let courseData;

            // 使用$.ajax加载接口数据（替换原来加载JSON文件的部分）
            $.ajax({
                url: 'http://10.2.1.17:8099/EXOnline/font/courses?method=newcouarsequery', // 替换为实际的接口地址
                type: 'GET',
                dataType: 'json',
                success: function (jsonData) {
                    courseData = jsonData.data;
                    console.log(courseData);

                    // 动态生成tab-link-1元素
                    let tabLinks1Container = $('.tab-links-1');
                    courseData.forEach((direction, index) => {
                        let directionId = index === 0? 'front-end-1' :
                            index === 1? 'back-end-1' :
                            index === 2? 'mobile-1' :
                            'new-direction-1';
                        let li = $('<li>', {
                            'class': 'tab-link-1',
                            'data-tab': directionId
                        });
                        if (index === 0) {
                            li.addClass('active');
                        }
                        li.text(direction.directionName);
                        tabLinks1Container.append(li);
                    });

                    // 初始化第一个区域的各个分类课程，动态根据课程方向数量进行调用（现在固定处理四个方向）
                    for (let i = 0; i < 4; i++) {
                        const directionId = i === 0? 'front-end-1' :
                            i === 1? 'back-end-1' :
                            i === 2? 'mobile-1' :
                            'new-direction-1';
                        initCategoryCourses(directionId, courseData[i].subjects, 8,
                            'tab-links-1', 'tab-content-1');
                    }

                    // 初始化第二个区域的各个分类课程，动态根据课程方向数量进行调用（现在固定处理四个方向）
                    for (let i = 0; i < 4; i++) {
                        const directionId = i === 0? 'front-end-2' :
                            i === 1? 'back-end-2' :
                            i === 2? 'mobile-2' :
                            'new-direction-2';
                        initCategoryCourses(directionId, courseData[i].subjects, 8,
                            'tab-links-2', 'tab-content-2');
                    }

                    // 绑定第一个区域的点击切换事件
                    $('.tab-links-1').on('click', function (e) {
                        // 保存当前滚动位置
                        var scrollTop = $(window).scrollTop();
                        e.preventDefault();
                        $('.tab-link-1').removeClass('active');
                        $(e.target).addClass('active');
                        $('.tab-content-1').hide();
                        $('#' + $(e.target).data('tab')).show();
                        // 切换完成后，恢复滚动位置
                        $(window).scrollTop(scrollTop);
                    });

                    // 绑定第二个区域的点击切换事件
                    $('.tab-links-2').on('click', function (e) {
                        // 保存当前滚动位置
                        var scrollTop = $(window).scrollTop();
                        e.preventDefault();
                        $('.tab-link-2').removeClass('active');
                        $(e.target).addClass('active');
                        $('.tab-content-2').hide();
                        $('#' + $(e.target).data('tab')).show();
                        // 切换完成后，恢复滚动位置
                        $(window).scrollTop(scrollTop);
                    });
                },
                error: function (xhr, status, error) {
                    console.log('Error:', status, error);
                }
            });
        });

        function initCategoryCourses(categoryId, subjects, numCourses, tabLinkClass, tabContentClass) {
            let categoryUl = $('#' + categoryId + ' ul');
            let count = 0;
            subjects.forEach(subject => {
                subject.courses.forEach(course => {
                    if (count < numCourses) {
                        let li = $('<li></li>');
                        let a = $('<a>', {
                            href: "courselearning.html?id=" + course.id, // 修改此处，添加课程id到href路径
                            target: "_blank"
                        });

                        let img = $('<img>', {
                            src: course.cover, // 使用cover作为图片路径
                            alt: "课程图片"
                        });
                        let h1 = $('<h1>').text(course.cname); // 使用cname作为课程名称
                        let h2 = $('<h2>').text(course.clevel); // 使用clevel作为难度
                        let priceText = course.cprice === "0.00"? "免费" : "￥" + course.cprice; // 使用cprice作为价格
                        let p = $('<p>').text(priceText);
                        a.append(img, h1, h2, p);
                        li.append(a);
                        categoryUl.append(li);
                        count++;
                    }
                });
            });
            // 阻止第一个区域的h3元素点击事件冒泡（可根据实际情况调整是否需要这部分）
            $('.tab-links-1 h3').click(function (e) {
                e.stopPropagation();
            });
            // 阻止第二个区域的h3元素点击事件冒泡（可根据实际情况调整是否需要这部分）
            $('.tab-links-2 h3').click(function (e) {
                e.stopPropagation();
            });
        }